<template>
  <el-drawer
      :model-value="visible"
      @update:model-value="$emit('update:visible', $event)"
      title="订单详情"
      direction="btt"
      size="90%"
      :before-close="handleClose"
      class="mobile-order-detail"
  >
    <div class="order-detail-container">
      <!-- 基本信息卡片 -->
      <el-card class="info-card">
        <div class="card-header">
          <el-tag :type="getStatusTagType(order.status)" size="large">
            {{ getStatusText(order.status) }}
          </el-tag>
          <span class="order-no">订单号：{{ order.orderNo }}</span>
        </div>

        <div class="product-section">
          <el-image
              :src="order.product.images?.[0] || 'https://img.yzcdn.cn/vant/ipad.jpeg'"
              fit="cover"
              class="product-image"
          />
          <div class="product-info">
            <h3 class="product-title">{{ order.product.title }}</h3>
            <div class="price-quantity">
              <span class="price">¥{{ order.product.price.toFixed(2) }}</span>
              <span class="quantity">x{{ calculateQuantity() }}</span>
            </div>
            <div class="total-amount">
              合计：<span class="amount">¥{{ order.amount.toFixed(2) }}</span>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 订单信息卡片 -->
      <el-card class="info-card">
        <el-descriptions :column="1">
          <el-descriptions-item label="创建时间">{{ order.createdAt }}</el-descriptions-item>
          <el-descriptions-item label="订单备注">{{ order.remark || '无' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 收货信息卡片（仅状态1-3显示） -->
      <el-card v-if="[1, 2, 3].includes(order.status)" class="info-card">
        <div class="section-title">收货信息</div>
        <div class="address-info">
          <el-icon><Location /></el-icon>
          <div class="address-text">
            <p class="contact">
              <span class="name">{{ order.buyer.username }}</span>
              <span class="phone">{{ order.contactPhone }}</span>
            </p>
            <p class="address">{{ order.address }}</p>
          </div>
        </div>
      </el-card>

      <!-- 买卖家信息卡片 -->
      <div class="user-cards">
<!--        <el-card class="user-card">-->
<!--          <div class="section-title">买家信息</div>-->
<!--          <div class="user-info">-->
<!--            <el-avatar :size="50" :src="order.buyer.avatar" />-->
<!--            <div class="user-details">-->
<!--              <p class="username">{{ order.buyer.username }}</p>-->
<!--              <p class="contact-info">-->
<!--                <el-icon><Phone /></el-icon>-->
<!--                {{ order.buyer.phone }}-->
<!--              </p>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-card>-->

<!--        <el-card class="user-card">-->
<!--          <div class="section-title">卖家信息</div>-->
<!--          <div class="user-info">-->
<!--            <el-avatar :size="50" :src="order.seller.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'" />-->
<!--            <div class="user-details">-->
<!--              <p class="username">{{ order.seller.username }}</p>-->
<!--              <p class="contact-info">-->
<!--                <el-icon><Phone /></el-icon>-->
<!--                {{ order.seller.phone }}-->
<!--              </p>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-card>-->
      </div>

      <!-- 底部操作按钮 -->
<!--      <div class="action-buttons">-->
<!--        <el-button type="primary" round @click="handleClose" class="close-btn">-->
<!--          关闭-->
<!--        </el-button>-->
<!--      </div>-->
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import {Location} from '@element-plus/icons-vue';

const props = defineProps({
  order: {
    type: Object,
    required: true,
    default: () => ({
      orderNo: '',
      status: 0,
      product: {},
      buyer: {},
      seller: {},
      amount: 0,
      createdAt: '',
      remark: '',
      address: '',
      contactPhone: ''
    })
  },
  visible: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:visible']);

const getStatusText = (status: number): string => {
  const statusMap: Record<number, string> = {
    0: '待付款',
    1: '已付款',
    2: '已发货',
    3: '已完成',
    4: '已取消',
  };
  return statusMap[status] || '未知状态';
};

const getStatusTagType = (status: number): string => {
  const typeMap: Record<number, string> = {
    0: 'warning',
    1: 'primary',
    2: 'success',
    3: 'success',
    4: 'danger',
  };
  return typeMap[status] || '';
};

const calculateQuantity = (): number => {
  if (!props.order.product?.price || props.order.product.price <= 0) return 0;
  return Math.round(props.order.amount / props.order.product.price);
};

const handleClose = () => {
  emit('update:visible', false);
};
</script>

<style scoped>
.mobile-order-detail {
  --el-drawer-padding-primary: 12px;
}

.order-detail-container {
  padding: 0 12px 80px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-card {
  border-radius: 8px;
  margin-bottom: 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.order-no {
  font-size: 12px;
  color: #999;
}

.product-section {
  display: flex;
  gap: 12px;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
}

.product-info {
  flex: 1;
}

.product-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.price-quantity {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.price {
  color: #f56c6c;
  font-weight: bold;
}

.quantity {
  color: #666;
}

.total-amount {
  text-align: right;
  font-size: 14px;
}

.amount {
  font-size: 16px;
  font-weight: bold;
  color: #f56c6c;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

.address-info {
  display: flex;
  gap: 8px;
}

.address-text {
  flex: 1;
}

.contact {
  margin: 0 0 4px;
  display: flex;
  gap: 8px;
}

.contact .name {
  font-weight: bold;
}

.address {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

.user-cards {
  display: flex;
  gap: 12px;
}

.user-card {
  flex: 1;
  border-radius: 8px;
}

.user-info {
  display: flex;
  gap: 12px;
  align-items: center;
}

.user-details {
  flex: 1;
}

.username {
  margin: 0 0 4px;
  font-weight: bold;
}

.contact-info {
  margin: 0;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-buttons {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  padding: 0 20px;
  background: white;
  padding-top: 12px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.close-btn {
  width: 100%;
}
</style>